<template>
	<view class="checkout">
		<view class="zhifu">支付方式</view>
		<view class="select_box">
			<picker @change="handleChange" :range="exitData">
				<label class="">{{ currExit }} ></label>
			</picker>
		</view>
		<uni-row :gutter="30" class="un1">
			<uni-col :span="6">
				<text>充值金额</text>
			</uni-col>
			<uni-col :span="16">
				<u--input class="in1" v-model="number" placeholder="请输入缴费金额" border="surround" @change="change">
				</u--input>
			</uni-col>
		</uni-row>
		<button @click="submit" class="button-login" hover-class="button-hover">充值</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				exitData: ['银行卡', '微信', '支付宝'],
				currIndex: 0,
				currExit: '银行卡',
				number: "",
			}
		},
		methods: {
			change(e) {
				// debugger
				console.log('change', e);
				this.number = e
			},
			handleChange(e) {
				this.currIndex = e.target.value;
				this.currExit = this.exitData[this.currIndex]
			},
			submit() {
				uni.navigateTo({
					url: './chongzhi001?number=' + JSON.parse(this.number)
				})
			}
		}
	}
</script>

<style lang="scss">
	.button-login {
		color: #FFFFFF;
		font-size: 34rpx;
		width: 470rpx;
		height: 100rpx;
		background: linear-gradient(-90deg, rgba(58, 163, 255, 1.0), rgba(255, 197, 131, 1.0));
		box-shadow: 0rpx 0rpx 13rpx 0rpx rgba(164, 217, 228, 0.2);
		border-radius: 50rpx;
		line-height: 100rpx;
		text-align: center;
		margin-left: auto;
		margin-right: auto;
		margin-top: 100rpx;
	}

	.in1 {
		height: 60rpx;
		width: 510rpx;
	}

	.checkout {
		margin-top: 30rpx;
		// padding: 30rpx;

		.select_box {
			height: 35px;
			line-height: 35px;
			// border: 1px solid #E5AC3C;
			border-radius: 6rpx;
			font-size: 30rpx;
			text-align: center;
			width: 130rpx;
			margin-left: 600rpx;
			margin-top: -65rpx;
		}
	}
</style>
